import { Skeleton, Space } from 'antd-mobile'
import style from './index.module.less'
import classNames from 'classnames'
import { useAppSelector } from '@src/redux/hook'
import { setCurrentCase, setCurrentPerson, setMine, setVersion } from '@src/redux/reducers/chart'
import { useAppDispatch } from '@src/redux/hook'
import { DownOutline } from 'antd-mobile-icons'
import { useEffect, useMemo, useState } from 'react'
import { awaitWrap, strToNum } from '@src/assets/js/tool'
import { getDataRequest, readRequest } from './ajax'
import { push } from '@src/redux/reducers/pages'

async function readMessage (caseid, id, callback) {
  await awaitWrap(readRequest(caseid, id))
  callback()
}

async function initData (userInfo, caseid, setList, setLoading, dispatch) {
  setLoading(true)
  const [e, d] = await awaitWrap(getDataRequest(caseid))
  setLoading(false)
  if (e === null && d !== null) {
    if (d instanceof Array) {
      const i = d.findIndex(li => li.accountid === userInfo.id)
      if (i !== -1) {
        dispatch(setMine(d[i]))
        d.splice(i, 1)
      }
      setList(d.map(li => {
        li.unreadMessageCount = strToNum(li.unreadMessageCount)
        return li
      }))
    }
  }
}

function Person ({ data }) {
  const dispatch = useAppDispatch()
  const c = useMemo(() => data ? data.unreadMessageCount : '', [data])
  const currentCase = useAppSelector(state => state.chart.currentCase)
  const currentPerson = useAppSelector(state => state.chart.currentPerson)
  const [active, setActive] = useState(false)
  return (
    <div className={classNames(style.person, { [style.active]: active })} onClick={() => {
      setActive(true)
      if (!currentPerson || currentPerson.accountid !== data.accountid) {
        dispatch(setCurrentPerson(data))
      }
      setTimeout(() => {
        setActive(false)
        readMessage(currentCase.id, data.accountid, () => {
          dispatch(setVersion(Date.now()))
        })
        dispatch(push({ element: 'chartDetail', title: data.name || '无' }))
      }, 200)
    }}>
      <span className={style['person-label']}>{data.action_subject}{active}</span>
      <span>{data.name}</span>
      <span className={style['person-num']}>
        {c > 0 && <span className={style.num}>{c}</span>}
      </span>
    </div>
  )
}

function Main ({ data }) {
  const dispatch = useAppDispatch()
  const userInfo = useAppSelector(state => state.basic.userInfo)
  const currentCase = useAppSelector(state => state.chart.currentCase)
  const version = useAppSelector(state => state.chart.version)
  const active = useMemo(() => currentCase && currentCase.id === data.id, [currentCase, data])
  const [list, setList] = useState([])
  const [loading, setLoading] = useState(false)
  const c = useMemo(() => {
    return strToNum(data.c)
  }, [data])
  useEffect(() => {
    if (active) {
      initData(userInfo, data.id, setList, setLoading, dispatch)
    }
  }, [userInfo, active, version, data, dispatch])
  return (
    <div className={style.container}>
      <div className={classNames(style.header, { [style.active]: active })} onClick={() => {
        dispatch(setCurrentCase(data))
      }}>
        <Space>
          <span>{data.caseno_desc}</span>
          {c > 0 && <span className={style.num}>{data.c}</span>}
        </Space>
        <span className={style.icon}><DownOutline /></span>
      </div>
      {
        active && (
          <div className={style.persons}>
            {
             (!loading || list.length > 0) && list.map((li) => {
                return <Person key={li.id} data={li} />
              })
            }
            {
              (loading && list.length === 0) && (
                <div className={style.loading}>
                  <Skeleton.Paragraph />
                </div>
              )
            }
          </div>
        )
      }
    </div>
  )
}


export default Main
